<template>
  <div id="app">
    <!-- <transition :name="transName"> -->
      <keep-alive include="detail,mob_index">
        <router-view class="router"/>
      </keep-alive>
    <!-- </transition> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      transName: "slide-right",
    };
  },
  watch: {
    $route(to, from) {
      let isBack = this.$router.isBack;
      if (isBack) {
        this.transName = "slide-left";
      } else {
        this.transName = "slide-right";
      }
      this.$router.isBack = false;
    },
  },
};
</script>
<style>
body {
  margin: 0px;
}

.slide-right-enter,
.slide-left-leave-to {
  /* opacity: 0; */
  transform: translateX(100%);
}
.slide-right-leave-to,
.slide-left-enter {
  /* opacity: 0; */
  transform: translateX(-100%);
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-leave-active,
.slide-left-enter-active {
  transition: all 1s ease;
  /* position: absolute; */
  /* top: 0; */
}
.router {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  margin: 0 auto;
}
</style>
